import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView
} from 'react-native';


export default class GoodsInfoBox extends Component {

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.titleText}>{this.props.title}</Text>
                <TouchableOpacity style={styles.infoBox}
                    onPress={() => {
                        this.props.navigation.navigate('ModifyAddressInfoPage', { onConfirm: this.props.onConfirm,title:'修改'+this.props.title,address: this.props.sendAddress,
                        type:'1',name:this.props.sendName,phone:this.props.sendPhone ,merchantInfo: this.props.merchantInfo})
                    }}>
                    <Image style={styles.locationImg} source={require('source/image/location_icon.png')}/>
                    <View style={{flex: 1, flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', marginLeft: 12}}>
                        <Text style={styles.addressText}>{this.props.sendAddress}</Text>
                        <Text style={styles.nameText}>{this.props.sendName +' '+this.props.sendPhone}</Text>
                    </View>
                    <Image style={styles.arrowImg} source={require('source/image/comm/icon_tree_arrow.png')}/>
                </TouchableOpacity>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        marginTop: 10,
        width: '100%',
        flexDirection: 'column',
        backgroundColor: '#fff',
        borderRadius: 6,
        padding: 16,
    },
    titleText: {
        fontSize: 16,
        fontWeight: '500',
        color: '#333333'
    },
    infoBox: {
        marginTop: 12,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    locationImg: {
        width: 24,
        height: 24
    },
    addressText: {
        lineHeight: 21,
        fontSize: 15,
        fontWeight: '500',
        color: '#222'
    },
    nameText: {
        marginTop: 6,
        fontSize: 14,
        color: '#666666'
    },
    arrowImg: {
        width: 15,
        height: 15,
        marginLeft: 12,
    }
    
})